<template>
  <div class="hello">
    <header>
      <span><img src="../assets/img/x.png"></span>
      <span>我的财富等级</span>
      <span><img src="../assets/img/gengduo.png"></span>
    </header>
    <main>
      <div class="logo">
        <img src="../assets/img/cf-logo.png">
      </div>
      <h4>财富值：0</h4>
      <div class="kong"></div>
      <div class="lv">
         <p>Lv0</p>
         <p></p>
         <p>Lv0</p>
      </div>
      
      <div class="lv-1">
        <h2>还差1000财富值可以升级Lv1</h2>
        <h3>总共消费了0金币</h3>
      </div>
      
      <div class="footer">
        <h2>享有专属等级图标，等级越高越显最贵身份.</h2>
        <h3>消费金币可增加财富值哦.</h3>
      </div>
     
    </main>
    
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang = 'less'>
@import '.././assets/less/style.less';

header{
   .px2rem(height, 100);
   .webkit();
   align-items: center;
   justify-content: space-between;
   span:nth-child(1){
      .padding-left(20);
      img{
        .px2rem(height, 24);
        .px2rem(width, 25);
      }
   };
    span:nth-child(2){
      .padding-right(450);
      .font(30,#474747);
   };
    span:nth-child(3){
      .padding-right(20);
      img{
        .px2rem(height, 26);
        .px2rem(width, 6);
      }
   };
}
main{
  .margin-left(80);
  .logo{
    img{
      .px2rem(height, 190);
      .px2rem(width, 192);
      .margin(180,260,100,200);
    }
  }
  h4{
    .font(18,#25b6a5);
    .padding-bottom(10);
  }
  .kong{
    .px2rem(width, 538);
    .px2rem(height, 20);
    background: #f0f0f0;
    .border-radius(10);
  }
  .lv{
    .webkit();
    justify-content:space-between; 
    p{
    .font(18,#25b6a5);
    .margin-top(10);
    }
    p:nth-child(3){
      .margin-right(130);
    };
  }
  .lv-1{
    h2{
      .font(28,#5b5b5b);
      .padding-top(130);
      .padding-left(100);
    }
    h3{
      .font(22,#5b5b5b);
      .padding-top(20);
      .padding-left(200);

    }
  }
  .footer{
    h2{
      .font(24,#5b5b5b);
      .padding-top(350);
      .padding-left(50);
    }
    h3{
      .font(24,#5b5b5b);
      .padding-top(20);
      .padding-left(200);

    }
  }
  
}
 

</style>
